<template>
  <div class="recent-learn-container">
    <div class="box">

      <div class="box-header">
        最近学过
      </div>
      <div class="box-body">

        <div v-for="(obj,i) in courseList"
             :key="obj.courseId"
             @click="goCourse(obj)"
             class="wrap">

          <div class="img-box">
            <img :src="obj.courseCover" ref="img">
          </div>

          <!--课程名称-->
          <div class="name" ref="name">
            {{ obj.courseName }}
          </div>

          <!--课程简介-->
          <div class="introduction">
            {{ obj.courseIntroduction }}
          </div>

          <!--  todo-->
          <div class="info">
            <div v-if="obj.courseSource==0" class="my tvc">自研</div>
            <div v-if="obj.courseSource==1" class="link tvc">外链</div>
            <div v-if="obj.courseSource==2" class="teacher tvc">外聘</div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import CoursePreview from "@/components/course/CoursePreview";

export default {
  //组件名称
  name: "RecentLearn",
  props: [],
  //组件注册
  components: {CoursePreview},
  //数据驱动
  data() {
    return {
      courseList: []
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    goCourse(obj){
      let type = obj.courseSource;
      if (type == 1) { //说明是外链
        window.open(obj.courseCommunityUrl, '_blank');
        return;
      }
      //跳转
      let {href} = this.$router.resolve({
        name: "CourseDetails",
        query: {
          cid: obj.courseId
        }
      });
      window.open(href, '_blank');
    },
    //查询基本课程列表
    selectRecentCourseList() {
      let userId = this.$store.getters.getUserId;
      this.axios.get(`/course/web/recent/${userId}`)
          .then((data) => {
            this.courseList = data.data;
          })
    }
  },
  //钩子函数
  created() {
    this.selectRecentCourseList()
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.recent-learn-container {
  min-width: 1200px;
  width: 1200px;
  margin: 0px auto;
  border-radius: 6px;

  .box {
    .box-header {
      font-size: 24px;
      font-weight: bolder;
      color: #333;
      padding-left: 6px;
      height: 24px;
      line-height: 24px;
    }

    .box-body {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .wrap {
        background-color: #FFF;
        width: 18%;
        margin: 15px 1% 0 1%;
        cursor: pointer;
        border-radius: 4px;

        /*img {
          width: 100%;
          height: 120px;
          display: inline-block;
        }*/

        .img-box {
          width: 100%;
          height: 120px;
        }

        .img-box img {
          display: inline-block;
          width: 94%;
          height: 112px;
          margin-top: 8px;
          margin-left: 3%;
          border-radius: 6px;
        }

        .name {
          height: 32px;
          font-size: 16px;
          line-height: 32px;
          color: #000;
          font-family: 微软雅黑;
          font-weight: bold;
          margin: 8px 0px 0px 4px;
        }

        .introduction {
          height: 32px;
          margin: 8px 0px 0px 4px;
          font-size: 14px;
          color: rgba(135, 135, 135, 1);;
          line-height: 16px;

          /*溢出省略...*/
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .info {
          margin: 16px auto 10px 4px;
          display: flex;
          justify-content: space-between;
          height: 20px;

          .my, .teacher, .link {
            width: 32px;
            font-size: 14px;
            color: #FFF;
            border-radius: 2px;
          }

          .my {
            background-color: #f64747;
          }

          .link {
            background-color: #4784ee;
          }

          .teacher {
            background-color: #f520f1;
          }

          .count {
            display: flex;
            line-height: 20px;
          }
        }
      }

      .wrap:hover{
        background-color: #FFF;
        width: 18%;
        margin: 15px 1% 0 1%;
        cursor: pointer;
        border-radius: 4px;
        box-shadow: 0px 0px 1px 1px #777;
      }
    }
  }
}
</style>